<template>
	<div>
		<!-- 年度开工率 -->
		<Echart id="guageChart2" :options="options" height="100px" width="100px" />
	</div>
</template>

<script>
	import Echart from '@/common/echart'
	export default {
		components: {
			Echart,
		},
		props: {
			percent: {
				type: Number
			}
		},
		data() {
			return {
				options: {}
			};
		},
		watch: {
			percent: {
				handler() {
					this.setOptions()
				}
			}
		},
		methods: {
			setOptions() {
				this.options = {
					title: {
						text: '内存使用率',
						left: 'center',
						bottom: '0%',
						textStyle: {
							color: '#1fa5f4',
							fontSize: 10
						}
					},
					series: [{
						type: 'gauge',
						radius: '100%', // 调整大小
						startAngle: 220,
						endAngle: -40,
						splitNumber: 5,
						axisLine: {
							lineStyle: {
								width: 8,
								// color: [
								// 	[0.5, '#00BFFF'], // 渐变开始 (浅蓝色)
								// 	[1, '#FF69B4'] // 渐变结束 (粉红色)
								// ],
								color: [
									[1, '#1542ce'] // 设置透明
								],
								opacity: 0.3 // 透明
							}
						},
						pointer: {
							width: 6,
							length: '70%',
							itemStyle: {
								color: '#00BFFF'
							}
						},
						progress: {
							show: true,
							width: 8,
							itemStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 1,
									y2: 0,
									colorStops: [{
											offset: 0,
											color: '#00BFFF'
										},
										{
											offset: 1,
											color: '#FF69B4'
										}
									]
								}
							}
						},
						axisTick: {
							show: false
						},
						splitLine: {
							distance: 2,
							length: 4,
							lineStyle: {
								width: 2,
								color: '#1542ce'
							}
						},
						axisLabel: {
							distance: 10,
							color: '#1542ce',
							fontSize: 10
						},
						detail: {
							valueAnimation: true,
							fontSize: 16,
							offsetCenter: [0, '50%'],
							color: '#a3d2ff',
							formatter: '{value}%'
						},
						data: [{
							value: this.percent // 默认 CPU 使用率值
						}]
					}],

				}
			}
		},
		mounted() {
			this.setOptions()
		}

	}
</script>